import React, { Component } from 'react'
import PropTypes from 'prop-types'
import { showList } from '_redux/actions/weather'
import weather from 'images/circle/more/weather.png'
import Scrollbar from 'react-smooth-scrollbar'
import { connect } from 'react-redux'
const arr = ['数据服务',
  '土壤检测',
  '生长期',
  '灌溉决策',
  '水分估测',
  '生产力评估',
  '生长状况',
  '遥感监测',
  '历史信息',
  '作业计划',
  '病虫害预测',
  '土壤制图',
  '产量预测',
  '农资',
  '农贷',
  '农机租赁',
  '法务服务',
  '高温胁迫',
  '有效积温',
  '无人机植保',
  '农业保险',
  '施肥方案']
class More extends Component {
  render() {
    return (
      <Scrollbar>
        <div className='more'>
          <div className='icon'>
            <img src={weather} alt="" onClick={() => {
              this.props.showList(true)
            }} />
            <span>天气</span>
          </div>
          {
            [1, 2, 3, 4, 6, 7, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 25,].map(function (id, i) {
              return <div key={id} className='icon'>
                <img src={require(`images/circle/more/${id}.png`)} alt="" />
                <span>{arr[i]}</span>
              </div>
            })
          }
        </div>
      </Scrollbar>
    )
  }
}

More.propTypes = {
  weather: PropTypes.object,
  showList: PropTypes.func,
}
export default connect(({ weather }) => ({
  weather
}), (dispatch) => ({
  showList: function (flag) {
    dispatch(showList(flag))
  }
}))(More)